<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:include="cultivateWeb/header :: culHeaderCss"></head>

<body>
<!-- 顶部导航 -->
<header th:include="cultivateWeb/header :: header"></header>
<link type="text/css" href="/css/cultivateWeb/style/course.css" rel="stylesheet">
<div style="background-color: #f7f7f7; ">
    <div class="layui-container">
        <p style="line-height: 40px">当前位置：<a href="/cultivate/homepage">首页</a> > <a
                href="/cultivate/courseIndex">培训课程</a> > 课程详情</p>
    </div>
    <section>
        <div style="width: 1200px;margin: auto">
            <p><img th:src="${cou.thumbnail}" class="img_1" style="margin: 0" id="courseImg"></p>
            <div class="div_1" style="margin-left: 25px">
                <input type="hidden" id="courseId" th:value="${cou.id}"/>
                <span class="span_1" th:text="${cou.name}"></span>
                <!--            <span class="span_2">共<span style="color: red;">24</span>学时，<span style="color: red;">944</span>分钟</span>-->
                <span class="span_2" th:if="${cou.specialPrice!='0.00'}">
                      优惠价：<span style="color:#fe7252;font-size:22px" th:text="￥+${cou.specialPrice}"></span>
                指导价：<span style="text-decoration: line-through;color:#999;font-size:14px"
                          th:text="￥+${cou.guidancePrice}"></span>&nbsp;&nbsp;&nbsp;&nbsp;
                </span>
                <span class="span_2" th:if="${cou.specialPrice=='0.00'}">
                     <span style="color:#fe7252;font-size:22px">免费</span>
                </span>
                <span class="span_2">课程类型：
                    <span th:if="${cou.type==0}">证书课程</span>
                    <span th:if="${cou.type==1}">师资培训课程</span>
                    <span th:if="${cou.type==2}">考评员培训课程</span>
                    <span th:if="${cou.type==3}">高级师资培训课程</span>
                    <span th:if="${cou.type==4}">高级考评员培训课程</span>
                </span>
                <span class="span_2">讲师名：<span th:text="${cou.teacherName}"></span></span>
                <span>
                    <!--<a th:href="@{'/traCourses/selCourseOrder?id='+${cou.id}}">-->
                         <input type="button" value="报名课程" onclick="submit()" class="btn"/>
                    <!--</a>-->
            </span>
            </div>
            <div style="clear: both"></div>
        </div>
        <div class="div_2">
            <div style="height: 50px">
                <span class="span_3 active1">课程简介</span>
                <span class="span_3">视频课程</span>
                <span class="span_3">配套资源</span>
                <span class="span_3">课程问答</span>
            </div>
            <hr style="margin: auto"/>
            <!-- 课程简介 -->
            <div style="font-size: 14px;  margin: 30px;" id="introduce">
                <p style="font-size: 14px;" th:if="${not #strings.isEmpty(cou.introduce)}"
                   th:text="${cou.introduce}"></p>
                <p style="font-size: 14px;" th:if="${#strings.isEmpty(cou.introduce)}">暂无数据</p>
            </div>
            <!-- 课程章节 -->
            <div style="font-size: 14px; margin:30px;display: none" id="chapterList"></div>
            <!-- 扩展资料 -->
            <div style="font-size: 14px; margin:30px;display: none" id="extendList"></div>
            <!-- 课程问答 -->
            <div style="display: none" id="courseAndAsk">
                <div style="font-size: 14px; margin:30px;" id="courseAsk"></div>
                <div id="page" class="page"></div>
            </div>

            <!-- 分页  -->
        </div>

        <!--<div class="div_3">-->
        <!--<div>-->
        <!--<span class="jp">精品推荐</span>-->
        <!--<hr style="margin: auto"/>-->
        <!--<span><img src="wx.png" style="width: 250px;height: 220px;border: 0"></span>-->
        <!--<span class="kc">精品课程1号</span>-->
        <!--</div>-->
        <!--</div>-->
    </section>
</div>

<!-- footer ------------------------------------------------------- -->
<div class="footer" th:include="cultivateWeb/header :: footer"></div>
</body>
<script type="text/javascript" src="/js/xlPaging.js"></script>
<script>
    $(function () {
        $(".span_3").click(function () {
            $(this).addClass("active1");
            $(this).siblings().removeClass("active1");
            if ($(this).text() == '课程简介') {
                $("#introduce").show();
                $("#chapterList").hide();
                $('#extendList').hide();
                $('#courseAndAsk').hide();
            } else if ($(this).text() == '视频课程') {
                $("#introduce").hide();
                $("#chapterList").show();
                $('#extendList').hide();
                $('#courseAndAsk').hide();
            }else if ($(this).text() == '配套资源'){
                $("#introduce").hide();
                $("#chapterList").hide();
                $('#extendList').show();
                $('#courseAndAsk').hide();
            }else if ($(this).text() == '课程问答'){
                $("#chapterList").hide();
                $("#courseAndAsk").show();
                $('#extendList').hide();
                $('#introduce').hide();
            }
        });
        selExtendList();
        selChapterList();
        questions();
    });

    function submit() {

        ajaxToken("/jzApi/user/selUserDetail", "GET", {}, function (r) {
            console.log("结果：" , r)
            if (r.state == 1){
                // if (r.headPortrait != "" && r.headPortrait != null && r.name != "" && r.name != null && r.sex != "" &&
                //     r.sex != null && r.idNumber != "" && r.idNumber != null && r.mobile != "" && r.mobile != null &&
                //     r.dateOfBirth != "" && r.dateOfBirth != null && r.nation != "" &&
                //     r.nation != null && r.education != "" && r.education != null && r.major != "" && r.major != null &&
                //     r.politicalAffiliation != "" && r.politicalAffiliation != null && (r.officialCapacity != "" &&
                //         r.officialCapacity != null) && r.province != "" && r.province != null && r.province != "" && r.province != null &&
                //     r.city != "" && r.city != null && r.liveAddress != "" && r.liveAddress != null && r.experience != "" &&
                //     r.experience != null){

                    ajaxToken("/jzApi/courses/selCourseOrder", "POST", {
                        id: $("#courseId").val()
                    }, function (res) {
                        location.href = '/couInfo/courseSurePay?orderId=' + res.orderId + '&courseId=' + $("#courseId").val() + '&type=0';
                    });
                // }else {
                //     layer.alert("完善个人信息才能报名该课程");
                // }
            }else if(r.state == 0){
                layer.alert("个人信息审核通过才能报名该课程");
            }else if(r.state == 3){
                layer.alert("完善个人信息才能报名该课程");
            }

        })


    }

    function selChapterList() {
        $.ajax({
            url: "/jzApi/courses/selChapterList",
            type: 'GET',
            data: {id: $("#courseId").val()},
            success: function (res) {
                if (res.data == 0) {
                    $("#chapterList").html('<div class="noData">暂无数据</div>');
                } else {
                    var list = res.data;
                    var categoryList = '';
                    list.forEach(function (item, index) {
                        var resourceList = item.resources;
                        var resourceListStr='<div class="list"><span class="chapterTitle">'+item.name+'</span>';
                        var a = '';
                        if (item.isFree==0) {
                            a='<text style="color:#005c34">(可试看)</text>'
                        }
                        resourceList.forEach(function (item2,index2){
                            resourceListStr+='<div class="chapter"><a href="/cultivate/study/studyChapter?id=' + item2.id +'&chapterId='+item2.chapterId+ '&courseId=' + $("#courseId").val() + '">' +
                            '<div class="cpt"></div>' +
                            '<span class="cpt">' + item2.name +'</span class="cpt">' +
                            '<span class="min">' + a+ item2.videoDuration + '</span>' +
                            '<div style="clear: both"></div></a></div>';
                        });
                        categoryList += resourceListStr+'</div>';
                    });
                    $("#chapterList").html(categoryList);
                }
            }
        });
    }

        function selExtendList() {
        $.ajax({
            url: "/jzApi/courses/selExtendList",
            type: 'GET',
            data: {id: $("#courseId").val()},
            success: function (res) {
                if (res.data == 0) {
                    $("#extendList").html('<div class="noData">暂无数据</div>');
                } else {
                    var list = res.data;
                    var categoryList = '';
                    list.forEach(function (item, index) {
                        var resourceList = item.resources;
                        
                        var resourceListStr='<div class="list"><span class="chapterTitle">'+item.name+'</span>';
                        var a = '';
                        if (item.isFree==0) {
                            a='<text style="color:#005c34">(可试看)</text>'
                        }
                        if(resourceList.length>0){
                            resourceList.forEach(function (item2,index2){
                                resourceListStr+='<div class="chapter"><a href="/cultivate/study/studyChapter?id=' + item2.id +'&chapterId='+item2.chapterId+ '&courseId=' + $("#courseId").val() + '">' +
                            '<div class="cpt"></div>' +
                            '<span class="cpt">' + item2.name +'</span class="cpt">' +
                            '<span class="min">' + a+ item2.videoDuration + '</span>' +
                            '<div style="clear: both"></div></a></div>';
                            });
                        }else{
                            resourceListStr+='<div class="chapter"><div class="noData">暂无数据</div></div>';
                        }
                        categoryList += resourceListStr+'</div>';
                        
                    });
                    $("#extendList").html(categoryList);
                }
            }
        });
    }

    function questions() {
        $.ajax({
            url:'/jzApi/courses/selCoustuQueAns',
            type: 'GET',
            data: {courseId: $("#courseId").val() ,current:1, number:10},
            success:function (r) {
                var list = r.data.records;
                var Q = '';
                var a = 1;
                list.forEach(function (item, index) {
                    Q += '<div>' +
                         '  <span class="no">'+(a+index)+'、</span>' +
                         '  <span>Q：<span class="q_a">'+item.contents+'</span></span>' +
                         '</div>' +
                         '<div>' +
                         '  <span class="no"></span>' +
                         '  <span>A：<span class="q_a">'+item.answers+'</span></span>' +
                         '</div><hr/>';
                })
                $("#courseAsk").html(Q);
                page(1,r.data.pages);
            }
        })
    }

    function page(num, tolPages) {
        $("#page").paging({
            nowPage: Number(num), // 当前页码
            pageNum: Number(tolPages), // 总页码
            buttonNum: 10, //要展示的页码数量
            canJump: 1,// 是否能跳转。0=不显示（默认），1=显示
            showOne: 0,//只有一页时，是否显示。0=不显示,1=显示（默认）
            callback: function (num) { //回调函数
                $.ajax({
                    url: "/jzApi/courses/selCoustuQueAns",
                    type: 'GET',
                    data: {
                        current: num,
                        number: 10,
                        courseId: $("#courseId").val()
                    },
                    success: function (r) {
                        var list = r.data.records;
                        var Q = '';
                        var a = 1;
                        list.forEach(function (item, index) {
                            Q += '<div>' +
                                '  <span class="no">'+(a+index)+'、</span>' +
                                '  <span>Q：<span class="q_a">'+item.contents+'</span></span>' +
                                '</div>' +
                                '<div>' +
                                '  <span class="no"></span>' +
                                '  <span>A：<span class="q_a">'+item.answers+'</span></span>' +
                                '</div>';
                        })
                        $("#courseAsk").html(Q);
                    }
                });
            }
        });
    }

</script>

</html>